<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui-timepicker-addon.css"/>
</head>
<body>
名称：<input type="text" id="text"> <br>
时间：<input id="time"> <br>
<input type="button" value="添加倒计时" id="button"><br>
示例：<span id="countdown" data-wow-delay=".3s" data-date="2018-12-1 06:00:00"></span><br>
<div id="space"></div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-zh-CN.js"></script>
<script type="text/javascript">
    $(function(){
        get();
        countdown();
        $('#time').prop("readonly", true).datetimepicker({
            timeText: '时间',
            hourText: '小时',
            minuteText: '分钟',
            secondText: '秒',
            currentText: '现在',
            closeText: '完成',
            showSecond: true, //显示秒
            dateFormat: "yy-mm-dd",
            timeFormat: 'HH:mm:ss' //格式化时间
        });
        $('#button').click(function () {
            var key = $('#text').val();
            var value = $('#time').val();
            $.ajax({
                type: 'POST',
                url: 'count-task-add',
                data: {
                    key: key,
                    value: value
                },
                success: function(data){
                    alert(data);
                    get();
                },
                dataType: 'text'
            });
        });
    });

    function btnClick(obj, id) {
        $.ajax({
            type: 'POST',
            url: 'count-delete',
            data: {
                id: id
            },
            success: function(data){
                if (data == 'ok') {
                    $(obj).prev().prev().remove();
                    $(obj).prev().remove();
                    $(obj).next().remove();
                    $(obj).remove();
                }
            },
            dataType: 'text'
        });
    }

    function get() {
        $.ajax({
            type: 'POST',
            url: 'count-task',
            success: function(data){
                // alert(JSON.parse(data).length);
                var json = JSON.parse(data);
                var html = '';
                for(var i = 0; i <json.length; i++) {
                    html += ('<span>' + json[i].key + '：</span><span id="countdown' + i + '" data-wow-delay=".3s" data-date="' + json[i].value + '"></span> <button onclick="btnClick(this, ' + i + ')">删除</button><br>');
                }
                $('#space').html(html);
                countdown();
            },
            dataType: 'text'
        });
    }

    function countdown() {
        $("span[id*='countdown']").each(function(){
            if ($(this).length) {
                $(this).countdown({
                    render: function(data) {
                        if (data.years >= 1) {
                            var $days =	(data.years*365)+data.days;
                        } else {
                            var $days = data.days;
                        }
                        $(this.el).html(
                            '<span class="day">' + this.leadingZeros($days) + ' 天 </span>'+
                            '<span class="hour">' + this.leadingZeros(data.hours, 2) + ' 小时 </span>'+
                            '<span class="min">' + this.leadingZeros(data.min, 2) + ' 分钟 </span>'+
                            '<span class="sec">' + this.leadingZeros(data.sec, 2) + ' 秒</span>'
                        );
                    }
                });
            }
        });
    }
</script>
</body>
</html>